<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>销售机会管理</title>
    <link rel="stylesheet" href="/box/assets/css/style.css">
    <link rel="stylesheet" href="/box/assets/css/loader-style.css">
    <link rel="stylesheet" href="/box/assets/css/bootstrap.css">
    <link rel="stylesheet" href="/box/layui/css/layui.css">
    <script src="/box/js/jquery-3.3.1.js"></script>
    <script src="/box/layui/layui.js"></script>
    <script src="/box/js/config.js"></script>
    <link rel="shortcut icon" href="/box/assets/ico/minus.png">
    <style>
        .box-pad {
            padding: 1%
        }
        #detail, #assign, #plan, #planEdit, #make {
            display: none;
            padding: 30px 50px 0 10px;
        }
        #detail input {
            border: none;
        }
        #topForm .layui-form-label{
            width: auto;
        }
    </style>
</head>

<body style="background: none">
    <div id="detail">
        <form class="layui-form" lay-filter="detailForm">
            <div class="layui-form-item">
                <div class="layui-inline">
                    <label class="layui-form-label">机会来源：</label>
                    <div class="layui-input-inline">
                        <input type="text" name="source" class="layui-input" readonly>
                    </div>
                </div>
                <div class="layui-inline">
                    <label class="layui-form-label">客户名称：</label>
                    <div class="layui-input-inline">
                        <input type="text" name="customerName" class="layui-input" readonly>
                    </div>
                </div>
            </div>
            <div class="layui-form-item">
                <div class="layui-inline">
                    <label class="layui-form-label">成功机率：</label>
                    <div class="layui-input-inline">
                        <input type="text" name="success" class="layui-input" readonly>
                    </div>
                </div>
                <div class="layui-inline">
                    <label class="layui-form-label">概要：</label>
                    <div class="layui-input-inline">
                        <input type="text" name="outline" class="layui-input" readonly>
                    </div>
                </div>
            </div>
            <div class="layui-form-item">
                <div class="layui-inline">
                    <label class="layui-form-label">联系人：</label>
                    <div class="layui-input-inline">
                        <input type="text" name="contacts" class="layui-input" readonly>
                    </div>
                </div>
                <div class="layui-inline">
                    <label class="layui-form-label">联系人电话：</label>
                    <div class="layui-input-inline">
                        <input type="text" name="contactsPhone" class="layui-input" readonly>
                    </div>
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">机会描述：</label>
                <div class="layui-input-block">
                    <input type="text" class="layui-input" name="describe" readonly>
                </div>
            </div>
            <div class="layui-form-item">
                <div class="layui-inline">
                    <label class="layui-form-label">创建人：</label>
                    <div class="layui-input-inline">
                        <input type="text" class="layui-input" id="fName" readonly>
                    </div>
                </div>
                <div class="layui-inline">
                    <label class="layui-form-label">创建时间：</label>
                    <div class="layui-input-inline">
                        <input type="text" name="creationTime" class="layui-input" readonly>
                    </div>
                </div>
            </div>
        </form>
    </div>
    <div id="assign">
        <form class="layui-form" id="assignForm" lay-filter="assignForm">
            <input type="hidden" name="saleId">
            <input type="hidden" name="state" id="assignState">
            <div class="layui-form-item">
                <label class="layui-form-label">指派给：</label>
                <div class="layui-inline">
                    <select id="assignId" name="assignUserId">
                        <option value="-1">请选择</option>
                    </select>
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">创建时间：</label>
                <div class="layui-input-inline">
                    <input type="text" name="assignTime" id="assignDate" class="layui-input" readonly>
                </div>
            </div>
        </form>
    </div>
    <div id="plan">
        <table class="layui-table" lay-filter="planTable" id="planTable"></table>
        <form class="layui-form" id="planAddForm" style="margin-top: 100px" lay-filter="planAddForm">
            <input type="hidden" name="saleId" id="planSaleId">
            <input type="hidden" name="customerName" id="CusName">
            <input type="hidden" name="assignUserId" id="assignUserId">
            <div class="layui-form-item">
                <label class="layui-form-label">日期：</label>
                <div class="layui-input-inline">
                    <input type="text" name="creationTime" class="layui-input" id="planDate" placeholder="yyyy-MM-dd">
                </div>
                <button type="button" class="layui-btn" style="margin-bottom: 10px; float: right;" onclick="planAdd()">制定</button>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">计划项：</label>
                <div class="layui-input-block">
                    <input type="text" name="planContent" class="layui-input">
                </div>
            </div>
        </form>
    </div>
    <div id="planEdit">
        <form class="layui-form" id="planEditForm" lay-filter="planEditForm">
            <input type="hidden" name="planId" id="planEditId">
            <div class="layui-form-item">
                <label class="layui-form-label">计划项：</label>
                <div class="layui-input-block">
                    <input type="text" name="planContent" id="planContent" class="layui-input">
                </div>
            </div>
        </form>
    </div>
    <div id="make">
        <form class="layui-form" id="makeForm" lay-filter="makeForm">
            <input type="hidden" name="planId" id="makeId">
            <div class="layui-form-item">
                <label class="layui-form-label">计划效果：</label>
                <div class="layui-input-block">
                    <input type="text" name="effect" id="effect" class="layui-input">
                </div>
            </div>
        </form>
    </div>
    <div class="box-pad">
        <h1>销售机会管理</h1>
        <hr>
        <form class="layui-form" id="topForm" lay-filter="topForm">
            <div class="layui-form-item">
                <div class="layui-inline">
                    <label class="layui-form-label">客户名：</label>
                    <div class="layui-inline">
                        <input type="text" id="customerName" class="layui-input" autocomplete="off">
                    </div>
                </div>
                <div class="layui-inline">
                    <label class="layui-form-label">概要：</label>
                    <div class="layui-inline">
                        <input type="text" id="outline" class="layui-input" autocomplete="off">
                    </div>
                </div>
                <div class="layui-inline">
                    <label class="layui-form-label">联系人：</label>
                    <div class="layui-inline">
                        <input type="text" id="contacts" class="layui-input" autocomplete="off">
                    </div>
                </div>
                <div class="layui-inline">
                    <label class="layui-form-label">销售机会状态：</label>
                    <div class="layui-inline">
                        <select id="saleState">
                            <option value="-1">请选择</option>
                        </select>
                    </div>
                </div>
                <button type="button" class="layui-btn" style="margin-bottom: 10px" onclick="selects()">查询</button>
            </div>
        </form>
        <table class="layui-table" lay-filter="saleTable" id = "saleTable"></table>
        <script>
            var table;
            var datas = JSON.parse(sessionStorage.getItem("login_user"));
            layui.use(['table','form','laydate'], function (){
                table = layui.table;
                var form = layui.form;
                var laydate = layui.laydate;

                table.render({
                    elem: '#saleTable'
                    ,url:'http://localhost:8888/sale/list'
                    ,text: {none: '没有查到相关数据'}
                    ,even: true
                    ,page : true
                    ,limit : 10
                    ,toolbar: "#toolbarDemo"
                    ,cols: [[
                        {field:'saleId', width:60, title: '编号'}
                        ,{field:'customerName', width:150, title: '客户名称'}
                        ,{field:'outline', width:250, title: '概要'}
                        ,{field:'contacts', width:75, title: '联系人'}
                        ,{field:'contactsPhone', width:120, title: '联系人电话'}
                        ,{field:'creationTime', width:160, title: '创建时间'}
                        ,{field:'eleDictionary', width:90, title: '状态', templet : function (d) {
                            return d.eleDictionary.entry;
                            }
                        }
                        ,{toolbar:'#barDemo', title: '操作'}
                    ]]
                });

                //常规用法
                laydate.render({
                    elem: '#planDate'
                });

                //  获取时间
                function getNow(s) {
                    return s < 10 ? '0' + s: s;
                }
                function dates() {
                    var now = new Date();
                    //格式化日，如果小于9，前面补0
                    var day = ("0" + now.getDate()).slice(-2);
                    //格式化月，如果小于9，前面补0
                    var month = ("0" + (now.getMonth() + 1)).slice(-2);
                    var h = now.getHours();
                    var minute = now.getMinutes();
                    var s = now.getSeconds();
                    //拼装完整日期格式
                    var today = now.getFullYear()+"-"+(month)+"-"+(day)+" "+getNow(h)+":"+getNow(minute)+":"+getNow(s);
                    return today;
                }

                setTimeout(function () {
                    table.reload("saleTable",{
                        page: {
                            curr: 1
                        }
                    });
                }, 500);

                $.get("http://localhost:8888/dictionary/byType", {dicType : "销售机会状态"},function (d) {
                    $.each(d.data,function () {
                        var options = $("<option></option>").appendTo("#saleState");
                        options.text(this.entry).val(this.name);
                    });
                    form.render("select", "topForm");
                });
                $.get("http://localhost:8888/user/byRoleId", function (d) {
                    $.each(d.data,function () {
                        var options = $("<option></option>").appendTo("#assignId");
                        options.text(this.userName).val(this.userId);
                    });
                });

                // var bars = $("#barDemo").html();
                // laytpl(bars).render({
                // },function (string) {
                //     $("#showTool").html(string);
                // });

                //  机会表：头工具栏事件
                table.on('toolbar(saleTable)', function(obj){
                    switch(obj.event){
                        case 'add':
                            $.get("sharedBox.html", function (data) {
                                layer.open({
                                type: 1,
                                title: "创建销售机会",
                                skin: "layui-layer-molv",
                                anim: 0,
                                area: "800px",
                                maxmin: true,
                                content: data,
                                btn: ['确定','取消'],
                                success: function () {
                                     //  获取创建人ID
                                    $("#founderId").val(datas.user.userId);
                                    $("#founderName").val(datas.user.userName);
                                    $("#hiddenState").val(1);
                                    //完成赋值
                                    $('#date').val(dates());
                                },
                                yes: function () {
                                    var str = $("#saleForm").serialize();
                                    $.post(`${new Config().base_url}/sale/add`, str, das => {
                                        layer.close(layer.index);
                                        table.reload("saleTable");
                                    });
                                }
                                });
                            });
                        break;
                    }
                });

                //  机会表：监听行内的工具条，查看、删除、修改...
                table.on('tool(saleTable)', function (obj) {
                    //  获取点击行的数据
                    var data = obj.data;
                    //  获取点击的lay-event属性值
                    var layEvent = obj.event;

                    if (layEvent === 'del') {  // 删除
                        if (data.state != 1) {
                            layer.msg('请选择未分配的数据行');
                            return;
                        }
                        layer.confirm('真的要删除吗？', function (index) {
                            //  关闭当前弹窗
                            layer.close(index);
                            //  发送异步请求
                            $.post("http://localhost:8888/sale/delete", {id:data.saleId}, function (da) {
                                table.reload("saleTable",{
                                    page: {
                                        curr: 1
                                    }
                                });
                            });
                        });
                    } else if (layEvent === 'edit') {  // 编辑
                        if (data.state != 1) {
                            layer.msg('请选择未分配的数据行');
                            return;
                        }
                        $.get("sharedBox.html",function (edit) {
                            layer.open({
                            type: 1,
                            title: "修改销售机会",
                            //  皮肤
                            skin: "layui-layer-molv",
                            //  动画
                            anim: 0,
                            area: "800px",
                            maxmin: true,
                            content: edit,
                            btn: ['确定','取消'],
                            success: function () {
                                form.val('saleForm',data);
                                setTimeout(function () {
                                    $.get("http://localhost:8888/user/byUserId", {id : data.founderId}, function (d) {
                                        $("#founderName").val(d.data.userName);
                                    });
                                }, 500);
                            },
                            yes: function () {
                                var str = $("#saleForm").serialize();
                                $.post(new Config().base_url + "/sale/update",str, function (das) {
                                    layer.close(layer.index);
                                    table.reload("saleTable");
                                });
                            }
                        })
                    });
                    } else if (layEvent === 'detail') {  // 查看
                        layer.open({
                            type: 1,
                            title: "销售机会",
                            //  皮肤
                            skin: "layui-layer-molv",
                            //  动画
                            anim: 0,
                            area: "800px",
                            maxmin: true,
                            content: $("#detail"),
                            btn: ['确定'],
                            success: function () {
                                form.val('detailForm',data);
                                setTimeout(function () {
                                    $.get("http://localhost:8888/user/byUserId", {id : data.founderId}, function (d) {
                                        $("#fName").val(d.data.userName);
                                    });
                                }, 500);
                            }
                        });
                    } else if (layEvent === 'assign') { // 指派
                        if (data.state != 1) {
                            layer.msg('请选择未分配的数据行');
                            return;
                        }
                        layer.open({
                            type: 1,
                            title: "指派人员",
                            //  皮肤
                            skin: "layui-layer-molv",
                            //  动画
                            anim: 0,
                            area: "450px",
                            maxmin: true,
                            content: $("#assign"),
                            btn: ['确定','取消'],
                            success: function () {
                                //  将当前行的一些数据传过去
                                form.val('assignForm',data);
                                $("#assignState").val(2);
                                $('#assignDate').val(dates());
                            },
                            yes : function () {
                                var str = $("#assignForm").serialize();
                                $.post(new Config().base_url + "/sale/addAssign",str, function (das) {
                                    layer.close(layer.index);
                                    table.reload("saleTable");
                                });
                            }
                        });
                    } else if (layEvent === 'plan') {   //  制定计划
                        layer.open({
                            type: 1,
                            title: "客户开发计划管理",
                            //  皮肤
                            skin: "layui-layer-molv",
                            //  动画
                            anim: 0,
                            area: "800px",
                            maxmin: true,
                            content: $("#plan"),
                            btn: ['返回'],
                            success: function () {
                                form.val("planAddForm", data);
                                //  添加计划表格
                                table.render({
                                    elem: '#planTable'
                                    ,url:'http://localhost:8888/plan/getBySaleId?saleId=' + data.saleId
                                    ,text: {none: '没有查到相关数据'}
                                    ,even: true
                                    ,page : true
                                    ,limit : 10
                                    ,toolbar: "#planTopDemo"
                                    ,cols: [[
                                        {field:'creationTime', width:105, title: '日期'}
                                        ,{field:'planContent', title: '计划项'}
                                        ,{field:'effect', title: '计划效果'}
                                        ,{toolbar:'#planDemo', width:120, title: '操作'}
                                    ]]
                                });
                            }
                        });
                    }
                });

                //  计划表：头工具栏事件
                table.on('toolbar(planTable)', function(obj){
                    var saleId = $("#planSaleId").val();
                    var CusName = $("#CusName").val();
                    var assignUserId = $("#assignUserId").val();
                    switch(obj.event){
                        case 'gong':
                            layer.confirm('真的要开发成功了吗？', function (index) {
                                //  关闭当前弹窗
                                layer.closeAll();
                                //  发送异步请求
                                $.post("http://localhost:8888/sale/over", {saleId : saleId, customerName : CusName, assignUserId : assignUserId, state : 3}, function (da) {
                                    layer.msg(da.msg);
                                    table.reload("planTable",{
                                        page: {
                                            curr: 1
                                        }
                                    });
                                    table.reload("saleTable",{
                                        page: {
                                            curr: 1
                                        }
                                    });
                                });
                            });
                            break;
                        case 'bai':
                            layer.confirm('真的要开发失败了吗？', function (index) {
                                //  关闭当前弹窗
                                layer.closeAll();
                                //  发送异步请求
                                $.post("http://localhost:8888/sale/over", {saleId:saleId, state : 4}, function (da) {
                                    table.reload("planTable",{
                                        page: {
                                            curr: 1
                                        }
                                    });
                                    table.reload("saleTable",{
                                        page: {
                                            curr: 1
                                        }
                                    });
                                });
                            });
                            break;
                    }
                });
                table.on('tool(planTable)', function (obj) {
                    //  获取点击行的数据
                    var data = obj.data;
                    //  获取点击的lay-event属性值
                    var layEvent = obj.event;

                    if (layEvent === 'del') {  // 删除
                        layer.confirm('真的要删除吗？', function (index) {
                            //  关闭当前弹窗
                            layer.close(index);
                            //  发送异步请求
                            $.post("http://localhost:8888/plan/delete", {planId:data.planId}, function (da) {
                                table.reload("planTable",{
                                    page: {
                                        curr: 1
                                    }
                                });
                            });
                        });
                    } else if (layEvent === 'edit') {  // 编辑
                        layer.open({
                            type: 1,
                            title: "修改客户开发计划",
                            //  皮肤
                            skin: "layui-layer-molv",
                            //  动画
                            anim: 0,
                            area: "600px",
                            maxmin: true,
                            content: $("#planEdit"),
                            btn: ['确定','取消'],
                            success: function () {
                                $("#planEditId").val(data.planId);
                                $("#planContent").val(data.planContent);
                            },
                            yes: function () {
                                var str = $("#planEditForm").serialize();
                                $.post(new Config().base_url + "/plan/update",str, function (das) {
                                    layer.close(layer.index);
                                    table.reload("planTable");
                                });
                            }
                        });
                    } else if (layEvent === 'make') {   //  执行计划
                        layer.open({
                            type: 1,
                            title: "计划效果",
                            //  皮肤
                            skin: "layui-layer-molv",
                            //  动画
                            anim: 0,
                            area: "600px",
                            maxmin: true,
                            content: $("#make"),
                            btn: ['确定','取消'],
                            success: function () {
                                $("#makeId").val(data.planId);
                            },
                            yes: function () {
                                var str = $("#makeForm").serialize();
                                $.post(new Config().base_url + "/plan/addEffect",str, function (das) {
                                    layer.close(layer.index);
                                    table.reload("planTable");
                                });
                            }
                        });
                    }
                });
            });
            function selects(){
                table.reload("saleTable",{
                    page: {
                        //  从第一页开始
                        curr: 1
                    }
                    ,where: {
                        customerName : $("#customerName").val(),
                        outline : $("#outline").val(),
                        contacts : $("#contacts").val(),
                        state : $("#saleState").val()
                    }
                });
            }
            function planAdd() {
                var str = $("#planAddForm").serialize();
                $.post(new Config().base_url + "/plan/add",str, function (das) {
                    table.reload("planTable");
                });
            }
        </script>

        <!--  表格上面的工具栏按钮  -->
        <script type="text/html" id="toolbarDemo">
            <div class="layui-btn-container">
                <button class="layui-btn layui-btn-sm" lay-event="add" title="添加"><span class="fontawesome-plus"></span></button>
            </div>
        </script>

        <script type="text/html" id="planTopDemo">
            <div class="layui-btn-container">
                <button class="layui-btn layui-btn-sm" lay-event="gong" title="执行成功"><span class="fontawesome-plus"></span></button>
                <button class="layui-btn layui-btn-sm" lay-event="bai" title="执行失败"><span class="fontawesome-remove"></span></button>
            </div>
        </script>

        <!--  编辑、删除按钮  -->
        <script type="text/html" id="barDemo">
            <a class="layui-btn layui-btn-xs" lay-event="detail" title="查看"><span class="fontawesome-file-alt"></span></a>

            {{# var datas = JSON.parse(sessionStorage.getItem("login_user"));}}
            {{# if(d.state == 1){ }}
            {{# layui.each(datas.user_pers, function(index, item){ }}
            {{# if(item.percode == 'sale:update'){ }}
            <a class="layui-btn layui-btn-xs" lay-event="edit" id="edit" title="修改"><span class="fontawesome-edit"></span></a>
            {{# } }}
            {{# });}}

            {{# layui.each(datas.user_pers, function(index, item){ }}
            {{# if(item.percode == 'sale:delete'){ }}
            <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del" title="删除"><span class="fontawesome-remove"></span></a>
            {{# } }}
            {{# });}}

            {{# layui.each(datas.user_pers, function(index, item){ }}
            {{# if(item.percode == 'sale:addAssign'){ }}
            <a class="layui-btn layui-btn-xs" lay-event="assign" title="指派"><span class="fontawesome-group"></span></a>
            {{# } }}
            {{# });}}
            {{# } }}

            {{# if(d.state == 2){ }}
            {{# if(d.assignUserId == datas.user.userId){ }}
            {{# layui.each(datas.user_pers, function(index, item){ }}
            {{# if(item.percode == 'plan:query'){ }}
            <a class="layui-btn layui-btn-xs" lay-event="plan" title="计划管理"><span class="fontawesome-tasks"></span></a>
            {{# } }}
            {{# });}}
            {{# } }}
            {{# } }}
        </script>

        <!--  计划按钮  -->
        <script type="text/html" id="planDemo">

            {{# var datas = JSON.parse(sessionStorage.getItem("login_user"));}}
            {{# if(d.effect == '' || d.effect == null){ }}
            {{# layui.each(datas.user_pers, function(index, item){ }}
            {{# if(item.percode == 'plan:update'){ }}
            <a class="layui-btn layui-btn-xs" lay-event="edit" title="修改计划"><span class="fontawesome-edit"></span></a>
            {{# } }}
            {{# });}}

            {{# layui.each(datas.user_pers, function(index, item){ }}
            {{# if(item.percode == 'plan:delete'){ }}
            <a class="layui-btn layui-btn-xs layui-btn-danger" lay-event="del" title="删除计划"><span class="fontawesome-remove"></span></a>
            {{# } }}
            {{# });}}
            {{# } }}

            {{# layui.each(datas.user_pers, function(index, item){ }}
            {{# if(item.percode == 'plan:update'){ }}
            <a class="layui-btn layui-btn-xs" lay-event="make" title="执行计划"><span class="fontawesome-comment"></span></a>
            {{# } }}
            {{# });}}

        </script>

        <!--<script type="text/html" id="barTwo">-->
            <!--<div id="showTool">-->
            <!--</div>-->
        <!--</script>-->
    </div>
</body>
</html>